<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			系统设置 / 菜单管理
		</view>
		
		<view class="body">
			<view class="class-manage-top">
				<view class="">
					<u-button type="primary" size="mini" @click="goUrl('./add')" >
						<text class="iconfont icon-shuliang-zengjia"></text>
						<text> &nbsp;新增一级菜单</text>
					</u-button>
				</view>
				
			</view>
			<u-table class="u-table-senior" >
				<u-tr style="margin-right:15px;" >
					<u-th class="u-table-th">菜单名称</u-th>
					<u-th class="u-table-th">图标</u-th>
					<u-th class="u-table-th">唯一标识</u-th>
					<u-th class="u-table-th" width="50px" >展示</u-th>
					<u-th class="u-table-th">排序</u-th>
					<u-th class="u-table-th">创建时间</u-th>
					<u-th  width="220px" >操作</u-th>
				</u-tr>
				<view class="u-table-senior-body" style="height:65vh" >
					<loaders v-if="data.length == 0" ></loaders>
					<u-tr  v-for="(item,index) in data" :key="index"
						class="u-table-tr" 
						:style="`${ item.parent_id ? '' :'background-color:#fafafa' };height:54px` "
					>
						<u-td class="u-table-td"  align="left" >
							<view :style="`text-align:left;padding-left:${levelMenu(item)}px;`">
								<text v-if="item.url" class="iconfont icon-t" > </text>
								 <text>
									 {{item.title}} 
								 </text>
							</view>
						</u-td>
						<u-td class="u-table-td">
							<view>
								<text :class="`iconfont ${item.icon}`"></text>
								<text>{{item.icon}}</text>
							</view>
						</u-td>
						<u-td class="u-table-td">
							{{item.menu_id}}
						</u-td>
						<u-td class="u-table-td"  width="50px"  >
							{{item.is_show?'✅' :'❌'}}
						</u-td>
						<u-td class="u-table-td">
							{{item.sort}}
						</u-td>
						<u-td class="u-table-td">
							<uni-dateformat   :date="item.create_date" ></uni-dateformat >
						</u-td>
						<u-td class="u-table-td " width="220px">
							<view class="u-table-td-util">
								<view>
									<u-button size="mini"  type="primary" @click="goUrl('./update?uid='+item._id)" >
										<text class="iconfont icon-xiugai"></text>
										<text>修改</text>
									</u-button>
								</view>
								<view>
									<u-button size="mini"  type="error" @click="delectData(item._id,index)"  >
										<text class="iconfont icon-lajitong"></text>
										<text>删除</text>
									</u-button>
								</view>
								<view>
									<u-button size="mini"  type="primary" @click="goUrl('./add?uid='+item._id+'&title='+item.title)"  v-if="item.url == null" >
										<text class="iconfont icon-shuliang-zengjia"></text>
										<text>子菜单</text>
									</u-button>
								</view>
							</view>
							
						</u-td>
					</u-tr>
				</view>
				
			</u-table>
		</view>
	</view>
	<u-toast ref="uToast" />
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				data:[],
				where:{},
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				uniCloud.importObject("menu",{customUI:true}).getMenuListStructure().then(result => {
					const data = result.result ;
					this.data = data;
				})
			},
			// 删除
			delectData(uid,index){
				uni.showModal({title:"您确认删除吗?",content:"数据删除后不可回复,请慎重"}).then(res =>  {
					if(!res.confirm) return ;
					this.loading = true ;
					uniCloud.importObject("menu",{customUI:true}).deleteMenu(uid).then(result => {
						if(result.code == 200){
							this.data.splice(index,1);
							this.loading = false ;
						}
						this.$refs.uToast.show({
							title: result.message,
							type:result.code == 200?'primary': 'error',
							duration:1500, position:'top',
						})
					})
				})
			},
			// 层级计算
			levelMenu(item){
				if(!item.parent_id) return 10 ; 
				if(!item.url) return 15 ; 
				if(item.url) return 30 ; 
			},
			goUrl(url){
				uni.navigateTo({url})
			},
		}
	}
</script>

<style lang="scss" scoped >
	.class-manage-top{
		display: flex;
		padding:5px 20px ;
		justify-content:flex-end;
	}
</style>
